<template>
	<div id="manage-question">
		<div class="title">管理题目</div>
		<el-table :data="tableData" height="65vh">
			<el-table-column width="60" label="序号" type="index" align="center"></el-table-column>
			<template v-for="item in tableColumn" :key="item.prop">
				<template v-if="!item.custom">
					<el-table-column
						:prop="item.prop"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					></el-table-column>
				</template>
				<template v-else>
					<el-table-column
						v-if="item.prop === 'operation'"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<div style="display: flex">
								<el-button type="text" @click="editData(scope.row)"> 编辑 </el-button>
								<el-button type="danger" text @click="deleteData(scope.row)">删除</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'tags'"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<span>{{ JSON.parse(scope.row.tags).join(",") || "---" }}</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'judgeConfig'"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<span>{{ convertLimits(scope.row.judgeConfig) || "---" }}</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'judgeCase'"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<span>{{ scope.row.judgeCase }}</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'createTime'"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<span>{{ new Date(scope.row.createTime).toLocaleString() }}</span>
						</template>
					</el-table-column>
				</template>
			</template>
		</el-table>
		<div v-if="tableData.length" class="pagination-w">
			<el-pagination
				:total="searchParams.total"
				background
				:current-page="searchParams.current"
				:page-size="searchParams.pageSize"
				:page-sizes="searchParams.pageSizes"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange"
				@current-change="handlePageChange"
			></el-pagination>
		</div>
	</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getQuestionList, deleteQuestion } from "@/api/question";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const tableData = ref([]);
const router = useRouter();
const tableColumn = ref([
	{ prop: "id", label: "题目id", align: "center", showOverflowTooltip: true },
	{ prop: "title", label: "标题", align: "center", showOverflowTooltip: true },
	{
		prop: "content",
		label: "内容",
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "tags",
		label: "标签",
		align: "center",
		custom: true,
		showOverflowTooltip: true
	},
	{ prop: "answer", label: "答案", align: "center", showOverflowTooltip: true },
	{
		prop: "submitNum",
		label: "提交数",
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "thumbNum",
		label: "通过数",
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "judgeConfig",
		label: "判题配置",
		custom: true,
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "judgeCase",
		label: "判题用例",
		custom: true,
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "createTime",
		label: "创建时间",
		custom: true,
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "userId",
		label: "用户id",
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "operation",
		label: "操作",
		align: "center",
		custom: true,
		fixed: "right"
	}
]);
const searchParams = ref({
	current: 1,
	pageSize: 10,
	pageSizes: [10, 20, 50, 100, 200],
	total: 0
});

const getQuestionListData = async () => {
	const res = await getQuestionList({
		current: searchParams.value.current,
		pageSize: searchParams.value.pageSize
	});
	if (res.code === 0) {
		tableData.value = res.data.records;
		searchParams.value.total = parseInt(res.data.total) || 0;
	} else {
		ElMessage.error(`加载失败：${res.message || "未知错误"}`);
	}
};

const handleSizeChange = newSize => {
	console.log("size change", newSize);
	searchParams.value.pageSize = newSize;
	getQuestionListData();
};

const handlePageChange = newPage => {
	console.log("page change", newPage);
	searchParams.value.current = newPage;
	getQuestionListData();
};

const editData = row => {
	router.push({
		path: "/update/question",
		query: {
			id: row.id
		}
	});
};
const deleteData = async row => {
	console.log(row.id);
	const res = await deleteQuestion({ id: row.id });
	if (res.code === 0) {
		ElMessage.success("删除成功");
		getQuestionListData();
	} else {
		ElMessage.error(`删除失败：${res.message || "未知错误"}`);
	}
};

const convertLimits = limits => {
	limits = JSON.parse(limits);
	return Object.entries(limits)
		.map(([key, value]) => `${key}:${value}`)
		.join(",");
};

onMounted(() => {
	getQuestionListData();
});
</script>

<style scoped lang="scss">
#manage-question {
	width: 100%;
	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		margin-bottom: 15px;
	}
	.pagination-w {
		display: flex;
		justify-content: right;
		margin-top: 20px;
	}
}
</style>
